---
title: Get Started
description: How to install and use Yamada UI in your project.
---

## Pick your framework

::::card-group
:::card{title="Next.js (App)" href="/docs/get-started/frameworks/next-app"}

A guide for installing and using Yamada UI with Next.js app directory.

:::
:::card{title="Next.js (Pages)" href="/docs/get-started/frameworks/next-pages"}

A guide for installing and using Yamada UI with Next.js pages directory.

:::
:::card{title="Vite" href="/docs/get-started/frameworks/vite"}

A guide for installing and using Yamada UI with Vite.js projects.

:::
:::card{title="React Router" href="/docs/get-started/frameworks/react-router"}

A guide for installing and using Yamada UI with React Router projects.

:::
::::

## Installation

To install Yamada UI in your project, you can either set it up using the [CLI](/docs/get-started/cli) or install it via [npm](https://www.npmjs.com).

:::warning
Yamada UI is compatible with React 19. If you are using React 18 or earlier, please upgrade to React 19.
:::

### CLI

::::steps

#### Setup

Running the command will create the necessary files and folders in your project.

:::code-group

```bash [pnpm]
pnpm dlx @yamada-ui/cli init
```

```bash [npm]
npx @yamada-ui/cli init
```

```bash [yarn]
yarn dlx @yamada-ui/cli init
```

```bash [bun]
bunx @yamada-ui/cli init
```

:::

#### Install the package

Install `@workspaces/ui` to your application.

:::code-group

```bash [pnpm]
pnpm add "@workspaces/ui@workspace:*"
```

```bash [npm]
npm install "@workspaces/ui@workspace:*"
```

```bash [yarn]
yarn add "@workspaces/ui@workspace:*"
```

```bash [bun]
bun add "@workspaces/ui@workspace:*"
```

:::

#### Add provider

After installing, add `UIProvider` to the root of your application.

```tsx {1,5,7}
import { UIProvider } from "@workspaces/ui"

const App = () => {
  return (
    <UIProvider>
      <YourApplication />
    </UIProvider>
  )
}
```

#### Use components

After adding `UIProvider`, you can use the components in your application.

```tsx {1,4}
import { Button } from "@workspaces/ui"

const App = () => {
  return <Button>Click me</Button>
}
```

That's it! You've successfully set up Yamada UI.

::::

### npm

::::steps

#### Install the package

Yamada UI can be installed with `@yamada-ui/react` only, and all components and hooks can be used.

:::code-group

```bash [pnpm]
pnpm add @yamada-ui/react
```

```bash [npm]
npm install @yamada-ui/react
```

```bash [yarn]
yarn add @yamada-ui/react
```

```bash [bun]
bun add @yamada-ui/react
```

:::

#### Add provider

After installing, add `UIProvider` to the root of your application.

```tsx {1,5,7}
import { UIProvider } from "@yamada-ui/react"

const App = () => {
  return (
    <UIProvider>
      <YourApplication />
    </UIProvider>
  )
}
```

#### Use components

After adding `UIProvider`, you can use the components in your application.

```tsx {1,4}
import { Button } from "@yamada-ui/react"

const App = () => {
  return <Button>Click me</Button>
}
```

That's it! You've successfully set up Yamada UI.

::::
